<template>
  <div class="map" ref="map"></div>
</template>

<script setup>
import * as echarts from "echarts";
import { ref, onMounted } from "vue";
import { MapData_list } from "@/request";
const map = ref(null);
const list = (name, adcode) => {
  const myCart = echarts.init(map.value);
  var myData = [
    { name: "安徽省", value: [117.283042, 31.86119, 123] },
    { name: "河北省", value: [114.502461, 38.045474, 122] },
    { name: "青海省", value: [101.778916, 36.623178, 124] },
    { name: "上海市", value: [121.438737, 31.072559, 125] },
  ];
  MapData_list(adcode)
    .then((res) => {
      console.log(res);
      echarts.registerMap(name, res.data);
      let option = {
        title: {
          text: name,
        },
        tooltip: {
          trigger: "item",
          formatter: function (params) {
            if (params.seriesType === 'scatter') {
              return `${params.name}<br/>${params.value[2]} (p / km2)`;
            } else if (params.seriesType === 'map') {
              return `${params.name}<br/>${params.value ? params.value : 'No data'}`;
            }
            return '';
          },
        },
        visualMap: {
          min: 8,
          max: 50,
          text: ['High', 'Low'],
          realtime: false,
          calculable: true,
          inRange: {
            color: ['#4f827c','#22404a','#f8f800','#6faa8a',]
          }
        },
        geo: {
          map: name, // Ensure you have included the map data
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#fff",
              borderColor: "#000",
            },
            emphasis: {
              areaColor: "#f3f3f3",
            },
          },

        },

        series: [
          {
            name: "散点",
            type: "scatter",
            coordinateSystem: "geo",
            symbolSize: '50',
            symbol: "pin", //气泡
            itemStyle: {
              color: "red",
            },
            label: {
              show: true, // 显示标签
              formatter: '{b}', // 标签内容显示数据点的名称
              color: '#fff', // 标签字体颜色
              fontSize: 12, // 标签字体大小
              // backgroundColor: 'rgba(0, 0, 0, 0.6)', // 标签背景色
              padding: [3, 5] // 标签内边距
            },
            data: res.data.features.map((item) => {
              return {
                name: item.properties.childrenNum,
                value: item.properties.center,
                zoom:1.5,
                layoutSize:'100%',
                itemStyle: {
                color: '#b91759' // 设置气泡颜色
            },
            
              };
            }),

          },
          {
            name: "点",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "pin", //气泡
            symbolSize: function (val) {
              if (val) {
                return val[2] / 4 + 20;
              }
            },
            label: {
              show: true,
              formatter: myData,
              color: "#fff",
              fontSize: 9,
            },

            itemStyle: {
              color: "#F62157", //标志颜色
            },
            // zlevel: 6,
            data: myData,
          },
          {
            name: "Top 5",
            type: "scatter",
            coordinateSystem: "geo",
            symbol: "circle", //气泡
            data: res.data.features.map((item) => {
              return {
                name: item.properties.childrenNum,
                value: item.properties.center,
              };
            }),
            symbolSize: 15,
            // showEffectOn: "render",
            // rippleEffect: {
            //   brushType: "stroke",
            // },
            itemStyle: {
              color: '#3da3bd' // 蓝色
            },
            zlevel: 1,
          },
          {
            name: name,
            type: "map",
            map: name,
            label: {
              show: false,
            },

            data: res.data.features.map((item) => {
              return {
                name: item.properties.name,
                value: item.properties.childrenNum,
                adcode: item.properties.adcode,
              };
            }),
            // 自定义名称映射
          },
        ],
      };
      myCart.setOption(option,true);
      myCart.on("click", function (e) {
        console.log(e);
        let { name, adcode } = e.data;
        list(name, adcode);
      });
    })
    .catch((error) => {
      console.log(error);
    });
};
onMounted(() => {
  list("中华人民共和国", 100000);
});
</script>

<style lang="scss" scoped>
.map {
  width: 700px;
  height: 700px;

  // border: 1px solid red;
  margin: 0 auto;
}
</style>
